import { Drawer, Tab } from '@alifd/next';
import { t } from '@lingui/macro';
import { observer } from 'mobx-react-lite';
import React from 'react';
import ScOrderForm from './ScOrderForm';
import OrderLogs from './OrderLogs';
import RefundRecord from './refund/RefundRecord';
import Endorse from './Endorse';

const DetailDrawer = (props) => {
  const {
    visible,
    onClose,
    handleCancel,
    handleUpdate,
    modal,
    orderId,
    order,
  } = props;

  const tabItems = [
    {
      title: '订单信息',
      content: (
        <ScOrderForm
          orderId={orderId}
          modal={modal}
          onCancel={handleCancel}
          onSubmit={handleUpdate}
        />
      ),
    },
    {
      title: '分账记录',
      content: '分账记录',
    },
    {
      title: '历史订单变更记录',
      content: (
        <OrderLogs
          orderId={orderId}
        />
      ),
    },
    {
      title: '相关评论',
      content: 'this is a test',
    },
    {
      title: '退款记录',
      content: (
        <RefundRecord orderId={orderId} modal={['refund']} />
      ),
    },
    {
      title: '改签记录',
      content: (
        <Endorse orderId={orderId} modal={['view']} onCancel={handleCancel} />
      ),
    },
  ];

  // if (order?.scOrder?.companyId !== global.getEnvCfg().ZL) tabItems.filter((p) => p.title !== '改签记录');

  return (
    <>
      <Drawer
        visible={visible}
        title={modal[0] === 'view' ? t`查看订单` : t`编辑订单`}
        onClose={onClose}
        closeMode={['ese', 'mask', 'close']}
        style={{ maxWidth: '90%' }}
        width="90%"
      >
        <Tab>
          {tabItems.map((item, idx) => (
            <Tab.Item
              title={t`${item.title}`}
              key={`${idx}`}
            >
              {item.content}
            </Tab.Item>
          ))}
        </Tab>
      </Drawer>
    </>
  );
};

export default observer(DetailDrawer);
